<template>
  <div style="background-color:#bfbfbf">
    <el-row class="shadow-lg">
    <el-col :span="2" class="text-center">
        <img src="https://image.16pic.com/00/05/60/16pic_560199_s.jpg?imageView2/0/format/png" style="width:4rem;height:4rem;" />
    </el-col>
    <el-col :span="12" class="my-auto">
        <div class="text-start">和我们一起播下幸福的种子</div></el-col>
     <el-col :span="10">
      <el-menu mode="horizontal" class="text-end" style="background-color:#bfbfbf">
        <el-menu-item index="" class="ms-auto">个人中心</el-menu-item>
        <el-menu-item index="">论坛</el-menu-item>
        <el-menu-item index="">关于我们</el-menu-item>
        <el-menu-item index="">爱心捐赠</el-menu-item>
        <el-menu-item index="">友情链接</el-menu-item>
      </el-menu>
    </el-col>
</el-row>
<el-row id="p">
  <el-col :span="24">
    <span style="position:absolute;left:400px;font-size:50px;">关爱老人  从我做起</span>
    <span style="opacity:0.5">
    <el-select v-model="form1.region" placeholder="请选择活动区域">
      <el-option label="呈贡区" value=""></el-option>
    </el-select>
     <el-select v-model="form1.region" placeholder="请选择活动区域" class="ms-4">
      <el-option label="吴家营" value=""></el-option>
    </el-select>
    </span>
    <div style="opacity:0.5">
      <el-input class="w-25 mx-auto mt-2"></el-input>
    </div>
    <div style="margin-top:20px">
      <el-button type="danger">搜索</el-button>
    </div>
  </el-col>
</el-row>

         <el-row class="border w-100">
             <el-col :span="6">
                 <div class="border ms-5 mx-auto">
             <div class="fs-5">夕阳行动</div>
              <div>点击爱心图标可帮扶老人,</div>
              <div>点击定位图标可实现定位,点击</div>
              <div>图片可查看老人信息</div>
         </div>
             </el-col>
             <el-col :span="6">
                 <div class="border ms-5">
             <img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1503/16/c15/3959082_3959082_1426508769018_mthumb.jpg" style="width:6rem;">
             <div><el-icon><Star /></el-icon><el-icon class="ms-4"><Location /></el-icon></div>
         </div> 
             </el-col>
             <el-col :span="6">
               <div class="border ms-5">
             <img src="http://img1.gtimg.com/ln/pics/hv1/12/3/1728/112363977.jpg" style="width:6rem" >
             <div><el-icon><Star /></el-icon><el-icon class="ms-4"><Location /></el-icon></div>
               </div>
             </el-col>
             <el-col :span="6"><div class="border ms-5">
             <img src="https://img.tukuppt.com//png_preview/00/24/08/D40PhOG3nY.jpg!/fw/780" style="width:6rem" >
             <div><el-icon><Star /></el-icon><el-icon class="ms-4"><Location /></el-icon></div>
             </div>
             </el-col>
         </el-row> 
         
         <el-row class="border w-100">
             <el-col :span="6">
         <div class="border ms-5">
             <img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1503/16/c15/3959082_3959082_1426508769018_mthumb.jpg" style="width:6rem;height:9rem">
             <div><el-icon><Star /></el-icon><el-icon class="ms-4"><Location /></el-icon></div>
         </div> 
             </el-col>
             <el-col :span="6">
                 <div class="border ms-5">
             <img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1503/16/c15/3959082_3959082_1426508769018_mthumb.jpg" style="width:6rem">
             <div><el-icon><Star /></el-icon><el-icon class="ms-4"><Location /></el-icon></div>
         </div> 
             </el-col>
             <el-col :span="6"><div class="border ms-5">
             <img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1503/16/c15/3959082_3959082_1426508769018_mthumb.jpg" style="width:6rem;height:9rem" >
             <div><el-icon><Star /></el-icon><el-icon class="ms-4"><Location /></el-icon></div>
             </div>
             </el-col>
             <el-col :span="6"><div class="border ms-5">
             <img src="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1503/16/c15/3959082_3959082_1426508769018_mthumb.jpg" style="width:6rem" >
             <div><el-icon><Star /></el-icon><el-icon class="ms-4"><Location /></el-icon></div>
             </div>
             </el-col>
         </el-row> 
</div>
</template>

<script>
import {Location,Star} from '@element-plus/icons-vue';
export default {
    name:'HomeFunction',
    components:{
      Location,
      Star
    },
    data(){
    return{
        form:null,
        form1:{
            region:null,
        },
    }
},
}
</script>

<style scoped>
.el-select{
  padding-top:90px;
  width:130px;
  margin-left:-5px;
}
#p{
  background-image: url("http://img95.699pic.com/photo/50104/2296.jpg_wh860.jpg");
  width:100%;
  height:220px;
}
.el-button{
  padding-top: 10px;
}
.el-input{
  border-radius: 60px;
}

</style>